﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@

@{
    //Layout = "~/Views/Shared/_FormLayout.cshtml";
    Layout = "~/Views/Shared/__ComponentLayout.cshtml";
    string editId = ViewData.Count > 0 ? ViewData["0"].ToString() : "null";
    string randomId = Guid.NewGuid().ToString();

}
@using ST.Torch.WebApi.Application.System.Services
@using ST.Torch.WebApi.Web.Core;
@inject IUIDService uidservice;
@inherits UtilRazorPage<object>
<div style="padding: 16px;"></div>
<form style="padding: 16px;padding-right:30px" class="layui-form EditUserInfoForm" action="" lay-filter="edit-data_@randomId">
      <input type="text" name="Id"  placeholder="" autocomplete="off" class="layui-input" style="display:none">
    <div class="layui-form-item"  >
        <label class="layui-form-label">@L("账号")</label>
        <div class="layui-input-block">
            <input type="text" id="AccountEle" name="Account" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">@L("昵称")</label>
        <div class="layui-input-block">
            <input type="text" name="NickName" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">@L("图片")</label>
        <div class="layui-input-block">
           
            <input type="text" style="display:none" id="ImgInputEle_@randomId" name="Img" placeholder="" autocomplete="off" class="layui-input">
          

            <div class="layui-upload">
                <button type="button" class="layui-btn" id="ImgButtonEle_@randomId">@L("上传图片")</button>
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="ImgEle_@randomId" style="height:50px;width:50px">
                    <p id="ImgText_@randomId"></p>
                </div>
                <div style="width: 95px;">
                    <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="ImgProgress_@randomId">
                        <div class="layui-progress-bar" lay-percent=""></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">@L("性别")</label>
        <div class="layui-input-block">
            <input type="radio" name="Sex" value="0" title="@L("女")" checked>
            <input type="radio" name="Sex" value="1" title="@L("男")">
        
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">@L("联系方式")</label>
        <div class="layui-input-block">
            <input type="text" name="Contact" placeholder="" autocomplete="off" class="layui-input">
        </div>
    </div>
    

   
    <div class="layui-form-item">
        <label class="layui-form-label">@L("是否启用")</label>
        <div class="layui-input-block">
            <input type="checkbox" name="IsEnable" lay-skin="switch" value="true" lay-text="@L("启用")|@L("禁用")">
        </div>
    </div>
    
    
    <div class="layui-form-item FormSubmit" style="text-align:right">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo_@randomId">@L("立即提交")</button>
            <button type="reset" class="layui-btn layui-btn-primary addbut">@L("重置")</button>
            <button type="button" class="layui-btn layui-btn-primary updatebut" lay-filter="Close">@L("关闭")</button>
        </div>
    </div>
    <div class="layui-form-item EditUserInfo" style="text-align:center">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo_@randomId">@L("确认修改")</button>
        </div>
    </div>
</form>
 

@section footer
{
<script>
    //
    layui.use(['form', 'toast', 'upload', 'element'], function () {
        var form = layui.form;
        var toast = layui.toast;
        var upload = layui.upload;
        var element = layui.element;
        //var editId = '@GetValue("Id", "null")';
        var IsEditInfo = '@GetValue("IsInfo", "False")';
        IsEditInfo = IsEditInfo == "False" ? false : true;
        console.log(IsEditInfo)
        var editId = '@editId';
        $(".EditUserInfo").hide();

        if (IsEditInfo) {
            //当前登陆人Id
            editId = '@uidservice.UserId';
            $(".EditUserInfo").show();
            $(".FormSubmit").hide();
            $(".EditUserInfoForm").css("background-color", "white")
            $(".EditUserInfoForm").css("margin-left", "16px")
            $(".EditUserInfoForm").css("margin-right", "16px")

        }
        var IsUpdate = editId != "null" ? true : false;
        //常规使用 - 普通图片上传
        var uploadInst = upload.render({
            elem: '#ImgButtonEle_@randomId'
               // , url: '/Api/System/Uploadfiles/UserImg' //上传接口
               , url: 'api/File/UploadFile' //上传接口
              ,data:{
                      DirectoryName:'UserImg'
              }
            , accept: 'images' //只允许上传图片
            , acceptMime: 'image/*' //只筛选图片
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#ImgEle_@randomId').attr('src', result); //图片链接（base64）
                });

                element.progress('ImgProgress_@randomId', '0%'); //进度条复位
                layer.msg('@L("上传中")', { icon: 16, time: 0 });
            }
            , done: function (res) {
                //如果上传失败
                // if (res.code > 0) {
                //     return layer.msg('上传失败');
                // }
                        console.log("done--")
                        console.log(res)
                if (res.code == 200) {
                    $("#ImgInputEle_@randomId").val(res.data)
                } else {
                    layer.msg(res.msg);

                }
                //上传成功的一些操作
                //……
                $('#ImgText_@randomId').html(''); //置空上传失败的状态
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#ImgText_@randomId');
                demoText.html('<span style="color: #FF5722;">@L("上传失败")</span> <a class="layui-btn layui-btn-xs demo-reload">@L("重试")</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
            //进度条
            , progress: function (n, elem, e) {
                element.progress('ImgProgress_@randomId', n + '%'); //可配合 layui 进度条元素使用
                if (n == 100) {
                    layer.msg('@L("上传完毕")', { icon: 1 });
                }
            }
        });


        $(".addbut").hide();
        $(".updatebut").hide();
        if (IsUpdate) {
            $(".updatebut").show();
            $("#AccountEle").attr("disabled", "disabled")
            Query();
        } else {
            $(".addbut").show();
            //默认初始值
            var tempData = {
                IsEnable: true
            }
            form.val("edit-data_@randomId", tempData);
            form.render();
        }
        //监听按钮
        $(".layui-form button").click(function () {
            var id = $(this).attr('lay-filter');
            //alert(id);
            switch (id) {
                case "Close": closeOpen(); break;
            }
        });
        var buttonEle = null;
        //监听提交
        form.on('submit(formDemo_@randomId)', function (data) {
            console.log(data.field)
             buttonEle = button.load({ elem: this });
            //layer.msg(JSON.stringify(data.field));
            if (IsUpdate) {
                Update(data);
            } else {
                Add(data);
            }
            return false;
        });

        function Query() {
            var formData = {
                Id: editId
            };
            $.ajax({
                type: 'POST',
                url: '/api/SYSUser/Single',//发送请求
                data: formData,
                success: function (result) {
                    console.log(result)
                    if (result.Succeeded) {
                        form.val("edit-data_@randomId", result.Data);
                        $('#ImgEle_@randomId').attr('src', FileHttpApiUrl+result.Data.Img); //图片链接（base64）
                    } else {
                        toast.error({
                            message: '@L("查询失败")',
                        });
                    }
                }
            });
        }

        function Add(data) {
            $.ajax({
                type: 'POST',
                url: '/api/SYSUser/Insert',//发送请求
                data: data.field,
                success: function (result) {
                    console.log(result)
                    buttonEle.stop();
                    if (result.Succeeded) {
                        toast.success({
                            message: '@L("添加成功")',
                        });
                        closeOpen();
                    } else {
                        var msgError = '@L("添加失败")';
                        if (result.Errors != "") {
                            msgError = result.Errors
                        }
                        toast.error({
                            message: msgError,
                        });
                    }


                }, error: function (err) {
                    buttonEle.stop();
                }
            });
        }

        function Update(data) {
            $.ajax({
                type: 'POST',
                url: '/api/SYSUser/Update',//发送请求
                data: data.field,
                success: function (result) {
                    console.log(result)
                    buttonEle.stop();

                    if (result.Succeeded) {
                        toast.success({
                            message: '@L("修改成功")',
                        });
                        if (IsEditInfo) return;
                        closeOpen();
                    } else {
                        var msgError = '@L("修改失败")';
                        if (result.Errors != "") {
                            msgError = result.Errors
                        }
                        toast.error({
                            message: msgError,
                        });

                    }
                }, error: function (err) {
                    buttonEle.stop();
                }
            });
        }
        function closeOpen() {

            parent.layer.close(G_LayuiOpenTypeIndex);
            return true;
        }

    });
</script>
}